<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../../lib/bootstrap@3.3.4/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <form class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control search-input" placeholder="请输入要搜索的名字">
            </div>
            <input type="button" class="btn btn-default search-btn" value="搜索">
        </form>
    </div>
    <form class="container">
        <label for="exampleInputText1" class="qwe">姓名</label>
        <input type="text" class="name" placeholder="请输入名字">
        <br>
        <label for="exampleInputText1" class="qwe">电话</label>
        <input type="number" class="phone" placeholder="请输入电话">
        <br>
        <label for="exampleInputText1" class="qwe">邮箱</label>
        <input type="email" class="email" placeholder="请输入邮箱">
        <br>
        <input type="button" value="保存" class="save">
    </form>

    <div class="container">
        <table class="table table-bordered">
            <caption>表格增删改查</caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="modal fade" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">修改</h4>
                </div>
                <form class="modal-body">
                    <div class="form-group">
                        <label for="mname">姓名</label>
                        <input type="text" class="form-control" id="mname" placeholder="请输入您的姓名">
                    </div>
                    <div class="form-group">
                        <label for="mphone">电话</label>
                        <input type="number" class="form-control" id="mphone" placeholder="请输入您的电话">
                    </div>
                    <div class="form-group">
                        <label for="memail">邮箱</label>
                        <input type="email" class="form-control" id="memail" placeholder="请输入您的邮箱">
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary edit-save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="temp-tr">
    {{each xxx v i}}
    <tr>
      <td>{{v.name}}</td>
      <td>{{v.phone}}</td>
      <td>{{v.email}}</td>
      <td>
        <button class="del">删除</button>
        <button class="edit">修改</button>
      </td>
    </tr>
    {{/each}}
  </script>
    <!-- $.each(data, function(i, v){}) -->
    <!-- [].forEach(function(v, i){}) -->
    <script src="../../../lib/jquery/jquery-1.12.4.min.js"></script>
    <script src="../../../lib/art-template/template-web.js"></script>
    <script src="../../../lib/bootstrap@3.3.4/js/bootstrap.js"></script>
    <script>
        $(function () {
            // 展示所有数据
            var getAll = () => {
                var all = localStorage.getItem('contacts');
                all = JSON.parse(all || '[]');
                var str = template('temp-tr', { xxx: all })
                $(".table tbody").html(str);
            }
            // 初始化执行
            getAll();
            // 保存事件
            $(".save").on("click", function () {
                var obj = {
                    id: Math.ceil(Math.random() * 10000),
                    name: $('.name').val(),
                    phone: $('.phone').val(),
                    email: $('.email').val(),
                }

                var all = localStorage.getItem('contacts');
                if (all) {
                    all = JSON.parse(all);
                    all.push(obj);
                    localStorage.setItem('contacts', JSON.stringify(all));
                } else {
                    localStorage.setItem('contacts', JSON.stringify([obj]));
                }

                getAll();

            })

            // 事件代理绑定事件
            $(".table").on("click", ".del", function () {
                var tr = $(this).parent().parent();
                var all = JSON.parse(localStorage.getItem('contacts'));
                all.splice(tr.index(), 1);
                localStorage.setItem('contacts', JSON.stringify(all));
                tr.remove();
                alert('确认删除')
            })
                .on("click", ".edit", function () {
                    var tr = $(this).parent().parent();
                    var all = JSON.parse(localStorage.getItem('contacts'));
                    var trData = all[tr.index()];
                    trData.index = tr.index();
                    sessionStorage.setItem('tr-data', JSON.stringify(trData));
                    $('#modal-edit').modal('show');
                })

            $('#modal-edit').on('show.bs.modal', function (e) {
                var trData = JSON.parse(sessionStorage.getItem('tr-data'));
                $('#mname').val(trData.name);
                $('#mphone').val(trData.phone);
                $('#memail').val(trData.email);
            })
            // 修改的完成
            $(".edit-save").on("click", function () {
                var all = JSON.parse(localStorage.getItem('contacts'));
                var trData = JSON.parse(sessionStorage.getItem('tr-data'));
                var obj = {
                    id: trData.id,
                    name: $('#mname').val(),
                    phone: $('#mphone').val(),
                    email: $('#memail').val(),
                }
                all.splice(trData.index, 1, obj);
                localStorage.setItem('contacts', JSON.stringify(all));
                $('#modal-edit').modal('hide');
                // 刷新所有数据
                getAll();
            })

            // 搜索
            $(".search-btn").click(function () {
                var all = JSON.parse(localStorage.getItem('contacts') || '[]');
                var val = $('.search-input').val();
                var arr = all.filter(v => {
                    return v.name.indexOf(val) > -1 || v.phone.indexOf(val) > -1 || v.email.indexOf(val) > -1;
                });

                var str = template('temp-tr', { xxx: arr });
                $(".table tbody").html(str);
            })
        })
    </script>
</body>

</html>